/**
 * 订单界面
 * 覃东梁 19611 2015年10月28日 下午3:03:32
 * 1、按钮控制；2、订单信息显示；3、收支信息显示
 *
 */
import { printJS } from "/@/hooks/web/usePrintJS";
import { useMessage } from "/@/hooks/web/useMessage";
import dayjs from "dayjs";

const { createMessage: $message } = useMessage();

//点击执行
export const jsonPrint = (business, customer, account) => jobPrintData(business, customer, account);

/**
 * @说明: 1、格式打印模版； 2、套入打印数据
 * @作者: qindl
 * @日期: 2023-03-02
 * @param data
 */
async function jobPrintData(business, customer, account) {
  console.info("jobPrintDate@", customer)
  if (!business) {
    $message.warn("操作失败：未找到打印数据！")
    return false
  }
  var datahtml = `
    <div class="header">
      <span class="fl title">订单线路</span>
      <span class="fr date" style="font-size: 12px">
        ${dayjs(new Date()).format('YYYY-MM-DD HH:mm')}
      </span>
    </div>
    <table class="orderTable orderTableAlign">
      <thead>
      <tr>
        <th class="w-10">订单</th>
        <td class="w-22">${business.orderId}</td>
        <th class="w-10">类型</th>
        <td>${business.ywlx_zw}</td>
        <th class="w-10">部门</th>
        <td>${business.ddlx_zw}</td>
        <th class="w-10">成人</th>
        <td class="w-10">${business.adultNo}</td>
        <th class="w-10">应收</th>
        <td class="text-right">${business.ygs}</td>
        <th class="w-10">应付</th>
        <td class="text-right">${business.ygf}</td>
      </tr>
      </thead>
      <tbody>
      <tr>
        <th>名称</th>
        <td colspan="3" class="text-left">${business.travelLine}</td>
        <th>出团</th>
        <td>${business.cfsj}</td>
        <th>儿童</th>
        <td>${business.childNo}</td>
        <th>已收</th>
        <td class="text-right">${business.yjs}</td>
        <th>已付</th>
        <td class="text-right">${business.yjf}</td>
      </tr>
      <tr>
        <th>状态</th>
        <td><div id="_ddztZw">${business.ddzt_zw}</div></td>
        <th>操作</th>
        <td><div id="_lrr">${business.lrr}</div></td>
        <th>录单</th>
        <td><div id="_lrsj">${business.lrsj}</div></td>
        <th>陪同</th>
        <td><div id="_sumEscortNo">${business.escortNo}</div></td>
        <th>未收</th>
        <td><div id="_wsk" class="text-right">${business.wsk}</div></td>
        <th>利润</th>
        <td><div id="_lr" class="text-right">${business.lr}</div></td>
      </tr>
      <tr>
        <th>说明</th>
        <td class="text-left" colspan="11"> ${business.bz||''} </td>
      </tr>
      </tbody>
    </table>
  `

  var customerOptionList = customer.optionList
  var customerhtml = `
    <div class="header mt-5">
      <span class="title">订购单位</span>
    </div>
    <table class="orderTable" id="buctable">
      <thead>
      <tr class="listBg">
        <th style="width: 4mm;"></th>
        <th style="width: 58mm;" colspan="8">订购单位</th>
        <th style="width: 10mm;" class="tac">成人价</th>
        <th style="width: 10mm;" class="tac">儿童价</th>
        <th style="width: 10mm;" class="tac">人数</th>
        <th style="width: 20mm;" class="tar">应收</th>
        <th style="width: 20mm;" class="tar">已收</th>
        <th style="width: 20mm;" class="tar">未收</th>
        <th style="width: 20mm;" class="tar">操作日期</th>
        <th style="width: 12mm;" class="tac">收客人</th>
      </tr>
      </thead>
      <tbody>
      ${customerOptionList.map((list, index) => { return `
      <tr :class="">
        <td>${index+1}</td>
        <td class="text-left" colspan="8">${list.customerDwmc}</td>
        <td>${list.crj}</td>
        <td>${list.etj}</td>
        <td>${list.adultNo}'${list.childNo}'${list.escortNo}</td>
        <td class="text-right">${list.ygs}</td>
        <td class="text-right">${list.yjs}</td>
        <td class="text-right">${list.wsk}</td>
        <td>${list.lrsj}</td>
        <td>${list.skr}</td>
      </tr>
      <tr :class="(index%2==0) ? 'listBg' : 'cor'">
        <td></td>
        <td style="width: 8mm;font-family: 仿宋">备注</td>
        <td class="text-left" style="font-size: 10px" colspan="15">${list.cbcbz.replace(/\n/g,'<br/>')}</td>
      </tr>  
      `
      }).join('')}
      </tbody>
      <tfoot>
      <tr>
        <td></td>
        <td>小计</td>
        <td colspan="7"></td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td class="tips" id="reshu">${customer.sumAdultNo}'${customer.sumChildNo}'${customer.sumEscortNo}</td>
        <td class="text-right" id="hjygs">${customer.hjygs}</td>
        <td class="text-right" id="hjyjs">${customer.hjyjs}</td>
        <td class="text-right" id="hjwsk">${customer.hjwsk}</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      </tfoot>
    </table>
  `

  var accountOptionList = account.optionList
  var accounthtml = `
    <div class="header mt-5">
      <span class="title">收付项目</span>
    </div>
    <table class="orderTable" id="acctable">
      <thead>
      <tr class="listBg">
        <th style="width: 4mm;"></th>
        <th style="width: 8mm;">状态</th>
        <th style="width: 8mm;">类型</th>
        <th style="width: 8mm;">方式</th>
        <th style="width: 34mm; text-align: left">收付名称</th>
        <th style="width: 18mm;">收入</th>
        <th style="width: 18mm;">支出</th>
        <th style="width: 23mm;">收支银行</th>
        <th style="width: 20mm;">收付时间</th>
        <th style="width: 12mm;">操作人</th>
        <th style="width: 20mm;">审核时间</th>
        <th style="width: 12mm;">审核人</th>
      </tr>
      </thead>
      <tbody>
      ${accountOptionList.map((list, index) => { return `
      <tr>
        <td>${index + 1}</td>
        <td>${list.statZw}</td>
        <td>${list.sflxZw}</td>
        <td>${list.sffsZw}</td>
        <td class="text-left">${list.sfmc}</td>
        <td class="text-right">${list.skje}</td>
        <td class="text-right">${list.fkje}</td>
        <td class="text-left">${list.bankdjm}</td>
        <td>${list.sfsj}</td>
        <td>${list.lrr}</td>
        <td>${list.shsj}</td>
        <td>${list.shrName}</td>
      </tr>
      <tr>
        <td></td>
        <td style="font-family: 仿宋">备注</td>
        <td class="text-left" colspan="10">${list.bz}</td>
      </tr>  
      `}).join('')}
      <tr>
        <td>&nbsp;</td>
        <td>小计</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td class="text-right">${account.sumskje}</td>
        <td class="text-right">${account.sumfkje}</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      </tbody>
    </table>
  `
  calPrintDate(datahtml+customerhtml+accounthtml)
}

//打印数据
async function calPrintDate(datahtml) {
  printJS({
    printable: [], //表格的数据
    properties: [],
    type: "json",
    header: datahtml,
    targetStyles: ['*'],
    style: printPageStyle(),
    scanStyles: false
  });
}

function printPageStyle() {
  let style =`
    @page{ size: auto A4 landscape; margin: 8mm; border: 1px red solid}
    table, table tr th, table tr td { border: 1px solid #808080; }
    table { border-collapse: collapse; font-size: 12px; width: 190mm; margin: 0 auto; text-align:center; }
    .header { width: 190mm; margin: 0 auto; }
    .header span{ height: 30px; line-height: 30px; }
    .header span.title{ font-weight: bold }
    .w-10 { width: 10mm; }
    .w-15 { width: 15mm; }
    .w-22 { width: 22mm; }
    .mt-5 { margin-top: 5mm; }
    .fl { float:left; }
    .fr { float:right; }
    .text-left { text-align:left; padding: 2px}
    .text-right { text-align:right; padding: 2px}
    .td-left {
      width: 13mm;
      text-align-last: justify;
    }
  `
  return style
}
